<template>
	<div class="wrap">
		<!--聊天室页面-->
		<vheader text='群聊天室'></vheader>
		<article>
			<div class="talk">
				<template v-for='item in list'>
					<my-msg v-if='item.type==0' :imgsrc='item.imgsrc' :name='item.name' :msg='item.msg'></my-msg>
					
					<other-msg v-if='item.type==1' :imgsrc='item.imgsrc' :name='item.name' :msg='item.msg'></other-msg>
					<p class="msg" v-if="item.type==2">{{item.msg}}</p>
				</template>
			</div>
		</article>
		<footer>
			<div class="sendarea">
				<input v-show='showipt' type="text"  autofocus v-model="msg" class='hideipt'  @keyup.enter='sendmsg' />
				<a href="javascript:;" @click="sendmsg">biu~</a>
			</div>
			<div class="cbox">
				<img @click='showemoji' src="/static/img/1.png" alt="" />
				<img @click='showcooper' src="/static/img/plus.png" alt="" />
				
			</div>
			<emoji :isshow='emoji' @clickqq='clickqq'></emoji>
			<div class="cooper" v-if="cooper">
				
			</div>
		</footer>
	</div>
</template>

<script>
	import myMsg from '@/components/myMsg'
	import otherMsg from '@/components/otherMsg'
	import emoji from '@/components/emoji'
	export default {
		data() {
			return {
				msg:'',//输入内容
				smsg:'',
				emoji: false,//是否显示emoji
				cooper:false,//是否显示操作框
				qqs:'',//qq表情src
				showipt:true,
				list: [
				/*	{
						type:0,//l类型：0 自己，1：其他人 2：提示信息
						msg:'11123444'
					},
					{
						type:1,
						msg:'11123444'
					},
					{
						type:2,
						msg:'王五加入群聊'
					},*/
				]
			}
		},
		components:{
			myMsg,
			otherMsg,
			emoji
		},
		computed: {
			nick(){
				return this.$store.state.uname;
			}
		},
		watch:{
			msg:function(news,olds){
				this.smsg=news;
			}
		},
		created() {
			console.log(socket);
			socket.emit('online', this.$store.state.uname);
			socket.on('online', (name) => {
				this.list.push({
					type: 2,
					msg: name + '加入群聊'
				});
				this.othernick=name;
			})
		},
		mounted() {
			socket.on('receiveGroupMsg', (dt) => {
					this.list.push({
						type: 1,
						msg: dt.msg,
						name:dt.name,
						imgsrc:dt.imgsrc
					})
				});
		},
		methods: {
			sendmsg() {
				if(this.msg=='') return;
				socket.emit('sendGroupMsg',{
					msg:this.msg,
					uname:this.$store.state.uname,
					head:this.$store.state.head
				});
				this.list.push({
					type: 0,
					msg: this.msg,
					name:this.$store.state.uname,
					imgsrc:this.$store.state.head
				});
				this.msg ='';
				
			},
			showemoji(){
				this.emoji=true;
				this.cooper=false;
			},
			showcooper(){
				this.emoji=false;
				this.cooper=true;
			},
			hidebox(){
				this.emoji=false;
				this.cooper=false;
			},
			input(e){
				
			},
			clickqq(dt){
				let qq_index=dt.substring(dt.indexOf('/qq/')+4,dt.length-4);
				let cur='[:emo'+qq_index+'$]';
				this.qqs=cur;
				this.msg=this.msg+this.qqs;
				this.emoji=false;
			}
		}
	}
</script>

<style lang='scss' scoped>
	@import "../assets/style/_mixin";
	.wrap{
		width: 100%;
		height: 100%;
		background: #F0F0F0;

		article {
			width: 100%;
			height: 100%;
			padding-top: 80px/$ppr;
			padding-bottom: 200px/$ppr;
			box-sizing: border-box;
			overflow: auto;
			.msg {
				text-align: center;
				font-size: 28px/$ppr;
				margin: 20px/$ppr 0;
				color: #999;
			}
			.talk {
				width: 92%;
				margin: 20px/$ppr auto;
			}
		}
		footer {
			width: 100%;
			position: fixed;
			bottom: 0px;
			left: 50%;
			@include transleft;
			max-width: 750px;
			.sendarea{
				width: 100%;
				height: 100px/$ppr;
				line-height: 100px/$ppr;
				position: relative;
				background:#f0f0f0;
				.hideipt{
					position: absolute;
					width:500px/$ppr;
					height: 96%;
					opacity: 1;
					top:0;
					left:10px/$ppr;
					z-index: 3;
					border: none;
					padding-left: 10px/$ppr;
				}
			}
			.cbox{
				width:100%;
				height: 80px/$ppr;
				line-height: 80px/$ppr;
				background: #f0f0f0;
				img{
					width:60px/$ppr;
					height: 60px/$ppr;
					margin: 10px/$ppr;
				}
			}
			.input{
				width:500px/$ppr;
				overflow-x:auto;
				height: 96%;
				border: none;
				outline: none;
				padding-left: 20px/$ppr;
				color: #111;
				font-size: 36px/$ppr;
				vertical-align: top;
				background: #fff;
				border-radius: 5px;
				position: absolute;
				display: flex;
				align-content: center;
				top:0;
				left:10px/$ppr;
				z-index: 2;
				img{
					display: inline-block;
					width:20px/$ppr;
					height: 20px/$ppr;
				}
			}
			input::-moz-placeholder {
				font-size: 36px/$ppr;
			}
			input::-webkit-input-placeholder {
				font-size: 36px/$ppr;
			}
			a {
				display: block;
				width: 180px/$ppr;
				height: 96%;
				background: #FDA1FA;
				color: #fff;
				position: absolute;
				right: 10px/$ppr;
				top: 0;
				text-align: center;
				border-radius: 5px;
			}
			.cooper{
				width:100%;
				height: 100px/$ppr;
				background: #fff;
				transition: all .5s ease;
			}
		}
	}
</style>